<template>
  <view v-if="good">
    <u-swiper
      :list="good.pics"
      name="pics_sma"
      height="500"
      mode="dot"
      img-mode="aspectFit"
      bg-color="#f3f4f6"
      @click="pictureView"
    ></u-swiper>
    <!-- 分享图标 -->

    <!-- 价格 -->
    <view class="share-aa">
      <view class="goods-price">￥{{ good.goods_price }}</view>
      <button open-type="share" class="share-cc">
        <u-icon name="zhuanfa"></u-icon>
      </button>
    </view>

    <!-- 商品名称 -->
    <view class="goods-name">{{ good.goods_name }}</view>
    <hr />
    <h4>图文详情</h4>
    <!-- 小程序原生富文本  适合简单的渲染-->
    <!-- <rich-text nodes="{{ good.goods_introduce }}" /> -->
    <!-- vue 自带 v-html 不推荐使用-->
    <!-- <view v-html="good.goods_introduce"></view> -->
    <!-- uview 组件提供 适合复杂的渲染-->
    <u-parse :html="good.goods_introduce" class="content" />
    <!-- 提交订单栏 -->
    <view class="sub-bar">
      <submit-bar :good="good" />
    </view>
  </view>
</template>

<script>
import SubmitBar from './components/submit-bar.vue'
export default {
  components: {
    SubmitBar,
  },
  data () {
    return {
      good: null
    }
  },
  onLoad (options) {
    console.log(options)
    this.good_id = options.goods_id || 43984
    this.getGoodDetailList(this.good_id)
  },
  // 添加分享的 生命周期函数 点击右上角菜单栏 分享才会生效 页面分享给好友
  onShareAppMessage () {

  },
  // 页面分享给朋友圈
  onShareTimeline () {

  },
  computed: {
    urls () {
      return this.good ? this.good.pics.map(item => item.pics_big_url) : []
    }
  },
  methods: {
    async getGoodDetailList (id) {
      const res = await this.$u.get(`/goods/detail?goods_id=${id}`)
      console.log(res)
      this.good = res.message
    },
    pictureView (index) {
      console.log(index)
      const urls = this.urls
      console.log(this.good.pics)
      uni.previewImage({
        current: urls[index], // 当前显示图片的 http 链接
        urls // 需要预览的图片 http 链接列表
      })
    }
  }
}
</script>

<style scoped lang="scss">
.share-aa {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.goods-price {
  padding: 10px;
  color: rgb(243, 72, 72);
}
.share-cc {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36rpx;
  height: 36rpx;
  background-color: transparent;
  margin-right: 50rpx;
  border-radius: 0px;
}
h4 {
  margin-top: 15rpx;
  padding: 15rpx;
  text-align: center;
  color: #ccc;
  border-top: 1px solid #ccc;
}
.sub-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
.content {
  margin-bottom: 102rpx;
}
.goods-name {
  padding: 15rpx;
}
</style>
